<template>
  <div>
      购物车
      <p>购物车数量：{{$store.state.cartNum}}</p>
      <p>辅助函数，将vuex中的数据，map（映射）到组件中，当做组件自己的数据使用</p>
      <p>购物车数量：{{myCartNum}}</p>
      <hr>
      <p>今年的年龄：{{$store.state.age}}</p>
      <p>明年的年龄：{{$store.getters.nextAge}}</p>
      <p>明年的年龄(辅助)：{{nextAge}}</p>
      <hr>
      <p>女生的名字：{{$store.state.women.name}}</p>
      <p>男生的年龄：{{$store.state.men.age}}</p>
      <!-- 默认状态下，只有state需要写模块名，剩下的都不写 -->
      <p>男生明年的年龄：{{$store.getters.menNextAge}}</p>
      <p>女生明年的年龄：{{$store.getters['women/womenNextAge']}}</p>
  </div>
</template>

<script>
// 导入辅助函数
import {mapState, mapGetters} from 'vuex'
export default {
  // 将数据映射到计算属性中
  computed: {
    ...mapState({
      // 修改后的名字：修改前的名字。需要改名字就用对象，不该就用字符串数组
      myCartNum: 'cartNum'
    }),
    ...mapGetters([
      'nextAge'
    ])
  }
}
</script>

<style>

</style>